/**
 * 顶部导航栏组件
 * 
 * 功能描述：
 * - 应用顶部的蓝色导航栏组件
 * - 显示应用名称和品牌信息
 * - 提供用户中心、更多选项等功能按钮
 * - 根据页面状态动态显示不同的功能按钮
 * 
 * 使用场景：
 * - 首页的顶部导航栏
 * - 品牌展示和用户功能入口
 * - 提供快速访问用户中心等功能
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { User, MoreHorizontal, Minus, Target } from 'lucide-react';
import { useNavigate, useLocation } from 'react-router-dom';

export default function Header() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleProfileClick = () => {
    navigate('/profile');
  };

  // 只在首页显示用户按钮
  const shouldShowUserButton = location.pathname === '/';

  return (
    <header className="bg-primary-600 text-white shadow-lg">
      {/* 蓝色头部栏 */}
      <div className="px-4 py-3 flex items-center justify-between">
        {/* 左侧标题 */}
        <div className="flex flex-col">
          <div className="flex items-center space-x-2">
            <h1 className="text-lg font-bold">妙手医生</h1>
            <span className="w-1 h-1 bg-white rounded-full"></span>
            <span className="text-sm opacity-90">妙手互联网医院</span>
          </div>
        </div>

        {/* 右侧图标组 */}
        <div className="flex items-center space-x-1">
          {shouldShowUserButton && (
            <button
              onClick={handleProfileClick}
              className="p-2 hover:bg-primary-700 rounded-full transition-colors"
              title="用户中心"
            >
              <User size={18} />
            </button>
          )}
          <button className="p-2 hover:bg-primary-700 rounded-full transition-colors" title="更多选项">
            <MoreHorizontal size={18} />
          </button>
          <button className="p-2 hover:bg-primary-700 rounded-full transition-colors" title="最小化">
            <Minus size={18} />
          </button>
          <button className="p-2 hover:bg-primary-700 rounded-full transition-colors" title="目标">
            <Target size={18} />
          </button>
        </div>
      </div>
    </header>
  );
} 